<template>
  <div class="footer drak">
    <div class="footer-title">
      <div class="visits">
        <h2>{{ count }}</h2>
        <span>访问量</span>
      </div>
      <div class="guaiwei">
        <div class="guanwe-item" v-for="item in icons" :key="item">
          <el-popover
            :width="200"
            trigger="click"
            class="popover"
            popper-class="dark"
            content="this is content, this is content, this is content"
          >
            <img class="tip-img" src="@/assets/image/qq.jpg" alt="" />
            <template #reference>
              <div>
                <div class="guanwei-icon">
                  <i class="iconfont" :class="item.icon"></i>
                </div>
                <div class="guanwei-title">{{ item.name }}</div>
              </div>
            </template>
          </el-popover>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { storeToRefs } from "pinia";
import useUserStore from "@/stores/user";
const userStore = useUserStore();
const { count } = storeToRefs(userStore);


const icons = [
  {
    name: "QQ",
    icon: "icon-QQ",
  },
  {
    name: "微信",
    icon: "icon-weixin",
  },
  {
    name: "微博",
    icon: "icon-weibo",
  },
];
defineOptions({ name: "AppFooter" });
</script>

<style lang="scss" scoped>
.footer {
  width: 100vw;
  height: 150px;
  padding: 0 50px;
  background-color: #111;

  .footer-title {
    display: flex;
    height: 100%;
    justify-content: space-between;
    align-items: center;

    .visits {
      display: flex;
      align-items: flex-end;

      h2 {
        color: #fff;
        font-size: 40px;
        font-weight: bold;
        font-style: normal;
        font-family: SourceHanSerifCN-Heavy, SourceHanSerifCN-Heavy-MAX, serif;
      }

      span {
        color: #aaa;
        font-size: 16px;
        margin-left: 8px;
      }
    }

    .guaiwei {
      display: flex;

      .guanwe-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 20px;

        .popover {
          :global(.tip-img) {
            width: 100%;
          }
        }

        .guanwei-icon {
          padding: 20px;
          color: #fff;
          background-color: #222;
          border-radius: 50%;
        }

        .guanwei-title {
          color: #aaa;
          font-size: 14px;
          text-align: center;
          margin-top: 5px;
        }
      }
    }
  }

  .iconfont {
    font-size: 18px;
  }
}
</style>
